<template>
	<view class="container">
		<view class="product-list">
			<view class="product-item" v-for="product in products" :key="product.id">
				<image :src="product.image" class="product-image" />
				<text class="product-title">{{ product.title }}</text>
				<text class="product-description">{{ product.description }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: [{
						id: 1,
						image: '/static/product1.jpg',
						title: 'RTP 胚胎素抗皱淡纹提拉紧致补水保湿面膜',
						description: '抗皱淡纹 提拉紧致 补水保湿'
					},
					{
						id: 2,
						image: '/static/product2.jpg',
						title: '烟酰胺补水保湿霜身体乳',
						description: '润泽修护 全身提亮 快速吸收 秋冬防裂'
					},
					{
						id: 3,
						image: '/static/product3.jpg',
						title: '补水保湿滋润栀子花护手霜',
						description: '柔嫩保湿 滋润不黏腻'
					},
					{
						id: 4,
						image: '/static/product4.jpg',
						title: '炫迈爽美白牙膏按压款',
						description: '益生菌 祛渍 双重美白'
					},
					{
						id: 5,
						image: '/static/product5.jpg',
						title: '脐带提取物洗护卸妆二合一温和不刺激洁面泡泡',
						description: '洗出好肌肤 栀青春润颜洁面泡泡'
					},
					{
						id: 6,
						image: '/static/product6.jpg',
						title: '立美丝凡士林保湿霜',
						description: '全身保湿 干皮润肤霜身体乳维生...'
					}
				]
			};
		},
		methods: {
			// 页面方法
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.product-image {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
	}

	.product-title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx;
	}

	.product-description {
		font-size: 28rpx;
		color: #666;
		padding: 0 20rpx 20rpx;
	}
</style>